/* 
CommonJS的对象模块: 内部是基于node进行打包处理的
*/
// 引入插件, 插件是一个构造函数
const EslintPlugin = require('eslint-webpack-plugin')
// 打包HTML的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

const {resolve} = require('path')  // resolve解析拼接路径
console.log(__dirname) // 当前配置文件所在目录的绝对路径

module.exports = {
  // 模式
  mode: 'development',  // 开发调试用这种模式
  // mode: 'production', // 打包生成用于上线运行时使用

  // 入口  => 指定入口js的相对路径
  entry: './src/main.js',

  // 输出
  output: {
    // 必须是绝对路径
    // path: 'D:/work/workspace/bj220213/webpack_gulp/代码/webpack-test/build',  // 指定所有打包产生文件的根目录
    // path: `${__dirname}/build`, // 可以
    path: resolve(__dirname, 'build'),
    filename: 'js/bundle.js',  // 指定打包生成的js文件名(可以带路径)
    clean: true, // 在启动打包前, 自动清除打包文件夹
  },

  // 配置loader
  module: {
    rules: [
      // 打包css文件
      {
        test: /\.css$/i, // 指定要打包处理的文件是所有css文件
        use: [ // 处理的loader包
          "style-loader", // 在运行时, 将js中的css内容添加到页面的<style>中
          "css-loader" // css文件内容打包到js打包文件中
        ],
      },

      // 打包less文件
      {
        test: /\.less/i,  // 处理less文件
        use: [ // 指定loader  ==> 从下向上执行每个loader
          'style-loader', // 在运行时, 将js中css添加到<style>中
          'css-loader', // 将css打包js中
          'less-loader', // 将less转为css
        ]
      },

      // 打包JS ES6==>ES5
      {
        test: /\.js$/, // 处理js文件
        exclude: /(node_modules)/, // 不对哪此文件夹下的js进行处理
        // user: 'babel-loader',
        use: { // 指定loader
          loader: 'babel-loader',
          options: { // 针对当前loader的配置
            presets: [
              // '@babel/preset-env'
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                  corejs: {  // 指定core-js的版本号为2
                    version: 2 
                  } 
                }
              ]
            ], // babel预设包
            plugins: [] // babel插件包
          }
        }
      },

      // 处理js/css中引入的图片
      {
        test: /\.(jpg|png|gif)$/,
        // asset代表打包后可以是一个图片url, 也可以是内嵌的图片base64编码的值
        type: "asset",    // 内置了file-loader/url-loader  
        // 解析器
        parser: {
          // 指定进行图片base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 5 * 1024, // 5kb    默认8k
          }
        },
        // 打包生成的文件
        generator: {
          filename: 'images/[hash:8][ext]', // hash名, 长度保留8位, 后缀名不变
        },
     },

     // 配置 html 的 loader
     {
        test: /\.(html)$/,
        // use: ['html-loader']
        use: 'html-loader'  // 只有一个loader就可以简写
      },

      // 打包字体图标
      {
        test: /\.(eot|svg|woff|woff2|ttf)$/,  
        type: 'asset',
        // 解析器
        parser: {
          // 指定进行base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 5 * 1024, // 5kb
          }
        },
        generator: {
          filename: 'fonts/[hash:8][ext]',
        },
      },
    ],
  },

  // 插件
  plugins: [
    // 配置上eslint的插件
    new EslintPlugin(),
    // 配置上HTML的插件
    new HtmlWebpackPlugin({
        template: "./public/index.html",// 指定html模板文件。
        inject: "body",// 将打包生成的JS文件放置在body尾部
        hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。
        minify: { // 对页面进行压缩
            removeAttributeQuotes: true,// 移除属性中的双引号
            removeComments: true,// 移除注释
            collapseWhitespace: true,// 去除空格与换行
        }
    })
  ],

  // 开发服务器
  devServer: {
    port: 4000, // 端口号
    open: true, // 自动打开浏览器
  },

  // devtool: 'source-map', // 生成单独的sourcemap文件
  // devtool: 'cheap-module-source-map'   // 开发环境已经做了, 我们可不用
}